<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="key" clearable placeholder="姓名、手机、昵称、标签、订单来源、订单编号，模糊查询" style="width: 600px;" />
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="state" placeholder="请选择">
              <el-option v-for="item in Object.keys(OrderStateList)" :label="OrderStateList[item]"
                :value="Number(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型：">
            <el-select v-model="type" placeholder="请选择">
              <el-option :key="0" label="全部" :value="0" />
              <el-option v-for="item in Object.keys(OrderTypeList)" :label="OrderTypeList[item]" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="dateTime" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item>
            <el-button type="primary" @click="openAddOrder()">添加订单</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="exportLoading" @click="doExport">导出Excel</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <!-- 列表信息 -->
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" show-overflow-tooltip label="ID" width="80" align="center" />
      <el-table-column prop="orderCode" label="订单编号" width="180" align="center" />
      <el-table-column prop="orderTypeStr" label="订单类型" align="center" />
      <el-table-column prop="voucherUrl" label="凭证" width="80px" align="center">
        <template slot-scope="{row}">
          <el-image style="width: 50px; height: 50px" :src="row.voucherUrl.split(',')[0]"
            :preview-src-list="row.voucherUrl.split(',')" />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="服务商" align="center">
        <template slot-scope="{row}">
          <span v-if="row.trueName">{{ row.trueName }}</span>
          <span v-if="row.trueName && row.phone">/</span>
          <span v-if="row.phone">{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dlsStr" show-overflow-tooltip label="服务商身份" width="120" align="center" />
      <el-table-column prop="uLelvelStr" show-overflow-tooltip label="会员等级" width="120" align="center" />
      <el-table-column prop="amt" label="金额" align="center" />
      <el-table-column prop="fromUserName" label="服务对象" align="center">
        <template slot-scope="{row}">
          <span v-if="row.fromUserName">{{ row.fromUserName }}</span>
          <span v-if="row.fromUserName && row.fromPhone">/</span>
          <span v-if="row.fromPhone">{{ row.fromPhone }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="state" label="状态" align="center" width="100">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="row.state == 1">{{ OrderStateList[row.state] }}</el-tag>
          <el-tag type="warning" v-if="row.state == 2">{{ OrderStateList[row.state] }}</el-tag>
          <el-tag type="danger" v-if="row.state == 3">{{ OrderStateList[row.state] }}</el-tag>
          <el-tag v-if="row.state > 3">{{ OrderStateList[row.state] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="econtent" show-overflow-tooltip label="驳回原因" align="center" />
      <el-table-column prop="ctime" show-overflow-tooltip label="创建时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.ctime.replace("T", " ") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template slot-scope="{ row }">
          <el-button v-if="row.state == 2" size="mini" type="primary" @click="toExamine(row)">审核</el-button>
          <el-button size="mini" type="primary" @click="openOrderInfo(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form :inline="true" style="padding-top: 10px;">
      <el-form-item v-if="total != null">
        <div class="flex">
          <div style="font-size: 20px;font-weight: bold;">统计:</div>
          <div style="margin-left: 20px;">【金额: {{ total.amt }} 】</div>
        </div>
      </el-form-item>
    </el-form>

    <div class="block " style="padding-top: 20px;">
      <el-pagination background :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="idx => { pageSize = idx }"
        @current-change="idx => { pageIndex = idx }" />
    </div>

    <!-- 添加订单 -->
    <digAddOrder v-if="modalStatus == 1" :info="currentInfo" />

    <!-- 订单审核 -->
    <digToexamine v-if="modalStatus == 2" :info="currentInfo" />

    <!-- 订单详情 -->
    <digOrderInfo v-if="modalStatus == 3" :orderid="currentId" />

  </div>
</template>

<script>
import { sorderPage, sorderExcel } from "@/api/sorder.js";
import { GetEnum, coinlist } from "@/api/ctrls.js";
import digAddOrder from '../components/digAddSorder.vue'
import digToexamine from '../components/digToexamine.vue'
import digOrderInfo from "@/views/components/digOrderInfo.vue";
export default {
  name: "Name",
  components: { digAddOrder, digToexamine, digOrderInfo },
  data() {
    return {
      key: "", // 关键词
      state: 0, // 订单状态
      type: 0,
      dateTime: "", // 时间查询


      listLoading: false,
      tableData: [],
      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      total: {},

      OrderStateList: {}, // 订单状态
      OrderTypeList: {}, // 订单类型
      coinList: [],


      modalStatus: 0, // 打开组件弹窗参数
      currentInfo: {}, // 当前用户信息
      currentId: {},

      exportLoading: false
    };
  },
  watch: {
    pageIndex(val) {
      console.log(val);
      this.getData();
    },
    pageSize(val) {
      this.getData()
    },
    modalStatus(val) {
      this.getData()
    }
  },
  created() {
    this.key = this.$route.query.key || ''
    this.state = this.$route.query.state || 0
    this.type = this.$route.query.type || 0
    this.dateTime = this.$route.query.dateTime || ''
  },
  mounted() {
    this.getData();
    this.GetEnum();
    // this.GetCoin();
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.getData();
    },
    /**打开添加订单弹窗 */
    openAddOrder(info = {}) {
      this.currentInfo = info;
      this.modalStatus = 1;
    },
    /**打开添加订单弹窗 */
    toExamine(info) {
      this.currentInfo = info;
      this.modalStatus = 2;
    },
    /**打开订单详情弹窗 */
    openOrderInfo(info) {
      this.currentId = info.id;
      this.modalStatus = 3;
    },
    //////////////////////////////////////////// 导出/导入 /////////////////////////////////////////////
    // 导出报表
    async doExport(name) {
      this.exportLoading = true
      const res = await sorderExcel({
        key: this.key,
        state: this.state,
        type: this.type,
        stime: this.dateTime ? this.dateTime[0] : "",
        etime: this.dateTime ? this.dateTime[1] : "",
      })
      this.exportLoading = false
      if (res) {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        let num = ''
        for (let i = 0; i < 10; i++) {
          num += Math.ceil(Math.random() * 10)
        }
        const fileName = this.dateTime[0]
          ? this.dateTime[0] + "-" + this.dateTime[1] + "订单列表.xlsx"
          : "订单列表.xlsx";
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    },
    // ////////////////////////////////////////// 数据请求 /////////////////////////////////////////////
    // 获取枚举
    async GetEnum() {
      const res = await GetEnum();
      this.OrderStateList = res.data['OrderState'];
      this.OrderTypeList = res.data['OrderType'];
    },
    // 获取币种
    async GetCoin() {
      const res = await coinlist();
      this.coinList = res;
    },
    /**获取主列表 */
    async getData() {
      this.listLoading = true;
      const { list, pageIndex, totalCount, _total } = await sorderPage({
        key: this.key,
        state: this.state,
        type: this.type,
        stime: this.dateTime ? this.dateTime[0] : "",
        etime: this.dateTime ? this.dateTime[1] : "",
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      this.totalCount = totalCount;
      this.tableData = list;
      this.total = _total;
      this.listLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

// 上传图片相关样式
.avatar-uploader .el-upload {
  width: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
